<template>
  <div class="schedule bs">
    <div class="top bs">
      <p class="top-p">今年的收益超越了</p>
      <p class="center-p">90.52%</p>
      <p class="footer-p">在线医生</p>
    </div>
    <div class="transition">
      <img src="@/assets/img/icon/home/home-92.svg" alt="" />
      <span>预约日程</span>
    </div>
    <div class="time-box">
      <p class="title">
        <img
          class="icon14 mr-6"
          src="@/assets/img/icon/home/home-time.svg"
          alt=""
        /><span class="c3 fw-600">选择时间</span>·让患者更方便资讯
      </p>
      <div class="oneweek">
        <div
          class="day-box cp"
          :class="{
            'bgc-lin':
              $day(curDate).format('YYYY-MM-DD') === item.format('YYYY-MM-DD')
          }"
          v-for="(item, index) in dateList"
          :key="index"
          @click="change(item.toDate(), index)"
        >
          <div class="day">
            {{
              ['周日', '周一', '周二', '周三', '周四', '周五', '周六'][
                item.day()
              ]
            }}
          </div>
          <div>{{ item.get('date') }}</div>
        </div>
      </div>
      <div class="oneweek">
        <div class="day-time">
          <div
            class="time cp"
            :class="{ timeactive: showactive(item, index) }"
            v-for="(item, index) in dateList[currentIndex].children"
            :key="index"
            @click="getTime(item, index)"
          >
            {{ item.time_log }}
          </div>
        </div>
      </div>
      <div style="margin-top: 30px; font-size: 16px; color: #1f1f1f">
        病患咨询你的时间
      </div>
      <div class="oneweek">
        <div class="daytime flex flex-wrap">
          <div
            class="ischoosetime cp"
            v-for="(item, index) in chooseList"
            :key="index"
          >
            <span>{{ item.time_log }}</span>
            <span class="delete" @click="deleteItem(item)">x</span>
          </div>
        </div>
      </div>
      <div class="isconfrim cp" @click="ajaxPostData">确定</div>
    </div>
  </div>
</template>

<script>
import {
  defineComponent,
  ref,
  getCurrentInstance,
  computed,
  onMounted
} from 'vue'
import { useRoute } from 'vue-router'
import { useStore } from 'vuex'
import { calcDateList } from '../hooks'
import { ElMessage } from 'element-plus'
import { DoctorSetAppointment, GetAppointment } from '@/service/api/doctor'
export default defineComponent({
  props: ['i'],
  name: 'schedule',
  setup() {
    const route = useRoute()
    const store = useStore()
    const { $day } = getCurrentInstance().appContext.config.globalProperties
    const curDate = ref(new Date())
    const currentIndex = ref(0)
    const chooseTime = ref([])
    const show = ref(false)
    const dateList = calcDateList($day)
    /**
     * 过滤日期相同获取病患咨询时间
     * return {Array}
     */
    const chooseList = computed(() => {
      let arr = []
      let thisTime = dateList[currentIndex.value].unix()
      dateList[currentIndex.value].children.forEach((item) => {
        chooseTime.value.filter((v) => {
          if (
            item.start_time + thisTime == v.start_time &&
            item.end_time + thisTime == v.end_time
          ) {
            arr.push(v)
          }
        })
      })
      return arr
    })
    /**
     * 日期高亮显示
     */
    const showactive = computed(() => {
      return function (val) {
        let flag = false
        let start_time = dateList[currentIndex.value].unix() + val.start_time
        let end_time = dateList[currentIndex.value].unix() + val.end_time
        chooseTime.value.forEach((v) => {
          if (v.start_time == start_time && end_time == v.end_time) {
            flag = true
          }
        })
        return flag
      }
    })
    /**
     * 切换日期
     */
    const change = (date, index) => {
      curDate.value = date
      currentIndex.value = index
    }
    /**
     * 添加预约时间
     *
     */
    const getTime = (item) => {
      let params = {
        date: dateList[currentIndex.value]
          .format('YYYY-MM-DD')
          .split('-')
          .join(''),
        start_time: dateList[currentIndex.value].unix() + item.start_time,
        end_time: dateList[currentIndex.value].unix() + item.end_time,
        time_log: item.time_log
      }
      if (params.end_time <= $day().unix()) {
        return ElMessage.error('请不要设置已过期的时间！')
      }
      let flag = false
      chooseTime.value.forEach((v) => {
        if (
          v.start_time == params.start_time &&
          params.end_time == v.end_time
        ) {
          flag = true
        }
      })
      if (!flag) {
        chooseTime.value.push(params)
      }
    }
    /**
     * 删除预约时间
     * @param {object} item
     */
    const deleteItem = (item) => {
      chooseTime.value = chooseTime.value.filter((v) => {
        return item.start_time != v.start_time && item.end_time != v.end_time
      })
    }
    /**
     * 设置预约时间
     */
    const ajaxPostData = () => {
      let postData = {
        uniacid: route.params.i,
        doctor_id: store.state.user.userInfo.id,
        date: chooseTime.value
      }
      DoctorSetAppointment(postData).then((res) => {
        if (res.code == 200) {
          ElMessage.success('设置成功！')
        }
      })
    }
    /**
     * 获取医生设置预约时间列表
     */
    const getCustomTableList = () => {
      GetAppointment().then((res) => {
        chooseTime.value = res.data
      })
    }
    onMounted(() => {
      getCustomTableList()
    })
    return {
      curDate,
      currentIndex,
      chooseTime,
      dateList,
      chooseList,
      showactive,
      show,
      change,
      getTime,
      deleteItem,
      ajaxPostData
    }
  }
})
</script>

<style lang="less" scoped>
.schedule {
  height: 923px;
  position: relative;
}
.top {
  height: 220px;
  text-align: center;
  background: url('../../../../assets/img/bg/home-bg.png') no-repeat;
  background-size: cover;
  margin-bottom: 43px;
  color: #fff;
  font-size: 20px;
  padding-top: 43px;
  .center-p {
    font-size: 45px;
    margin: 12px 0;
  }
}
.transition {
  border-radius: 8px 8px 0 0;
  padding: 25px 0 15px 0;
  background-color: #fff;
  text-align: center;
  line-height: 26px;
  color: #5198fe;
  font-size: 20px;
  img {
    width: 26px;
    vertical-align: middle;
    margin-right: 10px;
  }
}
.title {
  padding: 30px 0;
  text-align: center;
  color: #1f1f1f;
  .icon14 {
    width: 16px;
    height: 16px;
    vertical-align: middle;
    margin-right: 4px;
  }
}

.time-box {
  position: relative;
  height: 683px;
  padding: 0 60px;
  border-radius: 8px 8px 0 0;
  margin: 20px 0;
  background-color: #fff;
  .oneweek {
    display: flex;
    justify-content: space-between;
  }
  .day-box {
    box-sizing: border-box;
    color: #666;
    font-size: 12px;
    text-align: center;
    border: 1px solid rgba(0, 147, 211, 0.5);
    width: 48px;
    height: 68px;
    border-radius: 8px;
    .day {
      padding: 12px 0;
    }
  }
  .day-time {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
  }
  .time {
    margin-top: 20px;
    width: 106px;
    height: 28px;
    line-height: 28px;
    text-align: center;
    color: #666;
    border: 1px solid rgba(0, 147, 211, 0.5);
    border-radius: 6px;
  }
}
.isconfrim {
  position: absolute;
  left: 50%;
  bottom: 30px;
  transform: translateX(-50%);
  width: 326px;
  height: 46px;
  line-height: 46px;
  color: #fff;
  font-size: 16px;
  text-align: center;
  background-color: #5198fe;
}
.ischoosetime {
  position: relative;
  margin-top: 20px;
  margin-right: 6px;
  width: 106px;
  height: 28px;
  line-height: 28px;
  text-align: center;
  color: #1f1f1f;
  font-size: 12px;
  border-radius: 6px;
  background-color: #f5f7f7;
  .delete {
    position: absolute;
    width: 14px;
    height: 14px;
    text-align: center;
    line-height: 14px;
    background-color: #dfebfc;
    border-radius: 100%;
    right: -5px;
    top: -5px;
    color: #fff;
  }
}
.timeactive {
  background: -webkit-linear-gradient(left, #5097ff 0%, #8de6fc 100%);
  color: #fff !important;
}
.bgc-lin {
  color: #fff !important;
  border: none !important;
  background: -webkit-linear-gradient(top, #5097ff 0%, #8de6fc 100%);
}
.wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  img {
    width: 90px;
    height: 61px;
  }
  .block {
    width: 260px;
    height: 160px;
    border-radius: 6px;
    background-color: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
}
</style>
